/*柱形图*/
import React, { Component } from 'react';
import { Card } from 'antd';
// import echarts from 'echarts';
import echarts from 'echarts/lib/echarts';   // 按需加载echarts核心组件
import echartsTheme from '../../configs/theme_light';  //导入定制主题
import ReactEcharts from 'echarts-for-react';

// 导入柱形图
import 'echarts/lib/chart/pie';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/markPoint';


export default class Pie extends Component {

  componentWillMount() {
    echarts.registerTheme('Pinlor', echartsTheme);
  }

  render() {
    return (
      <div>
        <Card title="饼图" className="pinlor-cards">
          <ReactEcharts option={this.getOption()} theme="Pinlor" />
        </Card>
        <Card title="环形图" className="pinlor-cards">
          <ReactEcharts option={this.getOption2()} theme="Pinlor" />
        </Card>
        <Card title="自定义饼图" className="pinlor-cards">
          <ReactEcharts option={this.getOption3()} theme="Pinlor" />
        </Card>
      </div>
    )
  }

  getOption = () => {
    const option = {
      title: {
        text: '用户订单',
        x: 'center'
      },
      legend: {
        orient: 'vertical',
        right: 10,
        top: 10,
        bottom: 20,
        data: ['周一','周二','周三','周四','周五','周六','周日']
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a}<br/>{b}:{c}({d}%)'
      },
      series: [
        {
          name: '订单量',
          type: 'pie',
          center: ['50%', '60%'],
          data: [
            {
              value: 1000,
              name: '周一'
            },
            {
              value: 1000,
              name: '周二'
            },
            {
              value: 2000,
              name: '周三'
            },
            {
              value: 1500,
              name: '周四'
            },
            {
              value: 3000,
              name: '周五'
            },
            {
              value: 2000,
              name: '周六'
            },
            {
              value: 1200,
              name: '周日'
            }
          ]
        }
      ]
    };
    return option;
  };
  getOption2 = () => {
    const option = {
      title: {
        text: '用户订单',
        x: 'center'
      },
      legend: {
        orient: 'vertical',
        right: 10,
        top: 10,
        bottom: 20,
        data: ['周一','周二','周三','周四','周五','周六','周日']
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a}<br/>{b}:{c}({d}%)'
      },
      series: [
        {
          name: '订单量',
          type: 'pie',
          radius: ['50%', '80%'],
          center: ['50%', '60%'],
          data: [
            {
              value: 1000,
              name: '周一'
            },
            {
              value: 1000,
              name: '周二'
            },
            {
              value: 2000,
              name: '周三'
            },
            {
              value: 1500,
              name: '周四'
            },
            {
              value: 3000,
              name: '周五'
            },
            {
              value: 2000,
              name: '周六'
            },
            {
              value: 1200,
              name: '周日'
            }
          ]
        }
      ]
    };
    return option;
  };
  getOption3 = () => {
    const option = {
      title: {
        text: '用户订单',
        x: 'center'
      },
      legend: {
        orient: 'vertical',
        right: 10,
        top: 10,
        bottom: 20,
        data: ['周一','周二','周三','周四','周五','周六','周日']
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a}<br/>{b}:{c}({d}%)'
      },
      series: [
        {
          name: '订单量',
          type: 'pie',
          center: ['50%', '60%'],
          data: [
            {
              value: 1000,
              name: '周一'
            },
            {
              value: 1000,
              name: '周二'
            },
            {
              value: 2000,
              name: '周三'
            },
            {
              value: 1500,
              name: '周四'
            },
            {
              value: 3000,
              name: '周五'
            },
            {
              value: 2000,
              name: '周六'
            },
            {
              value: 1200,
              name: '周日'
            }
          ].sort((a,b)=>{
            return a.value - b.value;
          }),
          roseType: 'radius',
        }
      ]
    };
    return option;
  };
}
